<template lang="html">
    <div class="app-launcher-page banner-management-page">
	<Card :dis-hover="true" class="main-card">
		<p slot="title">
			<Icon type="ios-photos"></Icon> App启动图管理
		</p>
		<div slot="extra">

			<!-- <Input v-model="searchKey" class="search-input" icon="search" placeholder="Banner名称、类型" style="width: 300px" @keydown.native.enter="doSearch"></Input> -->
			<Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button>

			<Button type="ghost" class="add-new-btn" icon="plus" @click="showModal = true">新增</Button>
		</div>
		<div class="no-data" v-if="appLauncherList.length === 0">暂无数据</div>

		<Row :gutter="10">
			<Col span="6" v-for="launcher in appLauncherList" :key="launcher.uuid">
			<Card class="banner-card" :title="launcher.name">
				<div class="banner-preview-box">
					<div class="action-box">
						<Button type="text" icon="edit" @click="editLauncher(launcher)"></Button>
						<Button type="text" icon="trash-b" @click="deleteLauncher(launcher)"></Button>

					</div>
					<img :src="postUrl.imgPath + launcher.image_url" alt="">
				</div>
				<Row class="card-footer">
					<Col span="12">分辨率：{{launcher.resolution_ratio}}</Col>
					<Col span="12" style="text-align:right">跳转类型：
                        <span v-if="launcher.link_type_code == 'WEB'">网页</span>
                        <span v-else-if="launcher.link_type_code == 'AUDIO_TYPE'">歌曲分类</span>
                        <span v-else-if="launcher.link_type_code == 'LIVE_CONCERT'">音乐会直播</span>
                        <span v-else-if="launcher.link_type_code == 'LIVE_MASTER'">大师直播</span>
                        <span v-else-if="launcher.link_type_code == 'NEWS'">资讯</span>
                        <span v-else-if="launcher.link_type_code == 'PLAYLIST'">歌单</span>
                        <span v-else-if="launcher.link_type_code == 'SONG'">歌曲</span>
                        <span v-else-if="launcher.link_type_code == 'VIDEO'">录播</span>

                    </Col>
					<Col span="24" style="text-align:right;padding:5px 0;color:#999">{{launcher.createtime}}</Col>

				</Row>
			</Card>
			</Col>

		</Row>

		<transition name="fade">
			<div class="loading-cover" v-if="pageLoading">
				<Spin fix size="large"></Spin>
			</div>
		</transition>
		<div class="page-ctrl" v-if="pageCount">
			<Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
			</Page>
		</div>
	</Card>
	<Modal :mask-closable="false" :title="selectAppLauncher ? '编辑启动图':'新增启动图'" v-model="showModal" :loading="modalLoading" @on-ok="clickOK()" class="app-launcher-modal" width="60%">
		<Row :gutter="10">
			<Col span="8">
			    <header-img-uploader :img-upload-path="postUrl.doUploadLauncherImgUrl" :upload-img-data="uploadImgData" @on-upload-success="uploadImgSuccess" :show-img-path="uploadImgCallbackPath" class="auto-size-img-upload launcher-size-img-upload" icon="image" suggest="建议尺寸 9:16">
			    </header-img-uploader>
			</Col>
			<Col span="16">
                <Form :model="appLauncherForm" ref="appLauncherForm" :rules="appLauncherFormRules">
                    <FormItem label="分辨率" prop="resolution_ratio">
                        <Input v-model="appLauncherForm.resolution_ratio" placeholder="请填入分辨率"></Input>
                    </FormItem>
                    <FormItem label="跳转类型" prop="link_type_code">
                        <Select v-model="appLauncherForm.link_type_code" placement="top" :transfer="true" @on-change="linkTypeCodeChange">
                            <Option value="AUDIO_TYPE">歌曲分类</Option>
                            <Option value="LIVE_CONCERT">音乐会直播</Option>
                            <Option value="LIVE_MASTER">大师直播</Option>
                            <Option value="NEWS">资讯</Option>
                            <Option value="PLAYLIST">歌单</Option>
                            <Option value="SONG">歌曲</Option>
                            <Option value="VIDEO">录播</Option>
                            <Option value="WEB">网页</Option>
                        </Select>
                    </FormItem>
                    <transition name="fade" mode="out-in">
                        <FormItem label="跳转到链接" prop="link_url" v-if="appLauncherForm.link_type_code == 'WEB'" :key="'web'">
                            <Input v-model="appLauncherForm.link_url" placeholder="请填入链接地址"></Input>
                        </FormItem>
                        <FormItem label="跳转到" prop="link_detail_id" v-else :key="'other'">
                            <Select v-model="appLauncherForm.link_detail_id" placement="top" :transfer="true" placeholder="请选择一个跳转目标" :disabled="linkDetailTypeList.length === 0">
                                <Option :value="detailType.uuid" v-for="detailType in linkDetailTypeList" :key="detailType.uuid">{{detailType.name}}</Option>
                            </Select>

                        </FormItem>
                    </transition>
                </Form>

			</Col>

		</Row>

	</Modal>
</div>
</template>

<script src="./app-launcher.js">
</script>

<style lang="scss" src="./app-launcher.scss">
</style>
